<template>
  <div>
    <div id="item-one-chart"></div>
    <Table size="small" height="200" :columns="columns" :data="data"></Table>
    <Row style="margin-top:15px;">
      <Col span="8" offset="8">
        <Page @on-change="loadData" :current="query.page" :total="total" :page-size="10"/>
      </Col>
    </Row>
  </div>
</template>
<script>
import G2 from '@antv/g2'
import dayjs from 'dayjs'
import { memberNumberAnalyzes } from '@/graphql/query/analyze/index'
export default {
  name: 'one',
  data () {
    return {
      show: false,
      chart: null,
      columns: [
        {
          title: '日期',
          key: 'date',
          render: (h, params) => {
            return h('span', dayjs(params.row.date).format('YYYY-MM-DD'))
          }
        },
        {
          title: '管理员人数',
          key: 'adminNumber'
        },
        {
          title: '老师人数',
          key: 'teacherNumber'
        },
        {
          title: '学生人数',
          key: 'studentNumber'
        },
        {
          title: '家长人数',
          key: 'parentNumber'
        }
      ],
      data: [],
      page_sum: 1,
      total: 1,
      query: {
        page: 1,
        limit: 10,
        school_id: ''
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    init (school_id) {
      this.query.school_id = school_id
      this.$nextTick(() => {
        this.loadData(1)
      })
    },
    loadData (page) {
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '加载中...')
          ])
        }
      })
      const { query } = this
      query.page = page
      memberNumberAnalyzes({ input: query }).then((rep) => {
        const data = rep.data.member_number_analyzes
        this.query.page = data.current_page
        this.page_sum = data.last_page
        this.total = data.total
        this.data = data.data
        this.$nextTick(() => {
          this.$Spin.hide()
          this.renderChart()
        })
      })
    },
    initChart () {
      this.chart = new G2.Chart({
        container: 'item-one-chart',
        forceFit: true,
        height: 240,
        padding: [20, 0, 50, 0]
      })
      const data = this.getChartData()
      this.chart.source(data, {
        year: {
          type: 'linear',
          tickInterval: 1
        },
        day: {
          range: [ 0, 1 ]
        }
      })
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      })
      this.chart.axis('day', {
        title: null,
        label: null,
        tickLine: null,
        grid: null
      })
      this.chart.axis('value', {
        title: null,
        label: null,
        tickLine: null,
        grid: null
      })
      this.chart.areaStack().position('day*value').color('cate')
      this.chart.lineStack().position('day*value').color('cate')
      this.chart.render()
    },
    open () {
      this.show = true
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    getChartData () {
      const data = this.data
      const chartData = []
      for (let index = data.length - 1; index >= 0; index--) {
        const element = data[index]
        chartData.push(
          {
            cate: '管理员人数',
            day: dayjs(element.date).format('YYYY年MM月DD日'),
            value: element.adminNumber
          }
        )
        chartData.push(
          {
            cate: '教师人数',
            day: dayjs(element.date).format('YYYY年MM月DD日'),
            value: element.teacherNumber
          }
        )
        chartData.push(
          {
            cate: '学生人数',
            day: dayjs(element.date).format('YYYY年MM月DD日'),
            value: element.studentNumber
          }
        )
        chartData.push(
          {
            cate: '家长人数',
            day: dayjs(element.date).format('YYYY年MM月DD日'),
            value: element.parentNumber
          }
        )
      }
      return chartData
    },
    renderChart () {
      const data = this.getChartData()
      this.chart.forceFit()
      this.chart.changeData(data)
    }
  }
}
</script>
